<template>
     <div class="page-moddal">
        <el-dialog v-model="DialogVisible" title="新建用户" width="30%" center destroy-on-close>
        <hy-form v-bind="modalConfig" v-model="formData"></hy-form>
        <slot></slot>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="DialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleConfirmClick"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>
     </div>
</template>

<script>
import {ref,watch} from 'vue'
import {useStore} from 'vuex'
import HyForm from '@/base-ui/form'

export default {
    components:{
        HyForm
    },

    props:{
     modalConfig:{
         type:Object,
         required:true
     },
     defaultInfo:{
        type:Object,
        default:()=>({})
     },
     pageName:{
       type:String,
       required:true
     },
     otherInfo:{
         type:Object,
        default:()=>({})
     }
    },
    setup (props) {
           const DialogVisible=ref(false)
           const formData=ref({})
           watch(()=>props.defaultInfo,(newValue)=>{
             for(const item of props.modalConfig.formItems){
               formData.value[`${item.field}`]=newValue[`${item.field}`]
             }
           })
           // 点击确定的逻辑
           const store=useStore()
           const handleConfirmClick=()=>{
              DialogVisible.value=false
              if(Object.keys(props.defaultInfo).length){
                  console.log('编辑');
                   store.dispatch('system/editPageDataAction',{
                     pageName:props.pageName,
                     editData:{...formData.value,...props.otherInfo},
                     id:props.defaultInfo.id
                   })
              }else{
                 store.dispatch('system/createPageDataAction',{
                     pageName:props.pageName,
                     newData:{...formData.value,...props.otherInfo},
                   })
              }
           }
        return {
            DialogVisible,
            formData,
            handleConfirmClick
        }
    }
}
</script>

<style lang="scss" scoped>

</style>